<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">常用功能</span>
        <el-button
          type="primary"
          class="mb0 fr"
          round
          size="mini"
          @click="showDialog"
        >
          配置常用功能
        </el-button>
      </div>
      <div class="common-function">
        <ul>
          <li v-for="item in commonMenuList" :key="item.lngmenuid" @click="popMenu(item)">
            <p class="icon" :style="{'background': item.strbackground}">
              <svg-icon :icon-class="item.stricon || 'excel'" class="svg" />
            </p>
            <p class="p1">{{ item.strmenuname }}</p>
          </li>
          <li v-if="commonMenuList.length!==10" @click="showDialog">
            <p class="icon">
              <svg-icon icon-class="add" class="svg" />
            </p>
            <p class="p1">&nbsp;</p>
          </li>
        </ul>
      </div>
    </el-card>
    <CommonFunctionDialog
      ref="CommonFunctionDialog"
      @refreshCommonMenu="refreshCommonMenuEvent"
    />
  </div>
</template>
<script>
import { getCommonMenu } from '@/api/common/common'

export default {
  name: 'CommonFunction',
  components: {
    CommonFunctionDialog: () => import('./CommonFunctionDialog')
  },
  data() {
    return {
      commonMenuList: [],
      colors: ['#CC99FF', '#FF9900', '#6699FF', '#009933', '#FF3366', '#9999FF', '#0099FF', '#FF3366', '#FF6666', '#663399']
    }
  },
  created() {
    this.getCommonMenu()
  },
  methods: {
    // 点击配置常用功能弹窗
    showDialog() {
      this.$refs.CommonFunctionDialog.setChoose(this.commonMenuList)
      this.$refs.CommonFunctionDialog.show()
    },
    // 获取常用功能列表
    getCommonMenu() {
      getCommonMenu().then(res => {
        res.data.forEach((val, i) => {
          val.strbackground = this.colors[i]
        })
        this.commonMenuList = res.data
      })
    },
    // 点击常用功能跳转
    popMenu(item) {
      this.$router.push({
        name: item.strmenuen
      })
    },
    // 刷新常用功能
    refreshCommonMenuEvent() {
      this.getCommonMenu()
    }
  }
}
</script>
<style scoped>
  .p1 {
    text-align: center;
    color: #666;
    margin-top: 8px;
    cursor: pointer;
  }

  .common-function ul li {
    display: inline-block;
    margin: 0 5px;
  }

  .common-function .icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ccc;
    text-align: center;
    line-height: 40px;
    margin: auto;
    cursor: pointer;
  }

  .common-function .svg {
    font-size: 16px;
    color: #fff;
  }

  .box-card {
    margin: 0;
  }

</style>

<style lang="scss">
  .box-card .el-card__header {
    padding: 12px 20px;
    height: 50px;
    position: relative;
  }

  .box-card .title {
    color: #00A99D;
    padding-left: 12px;
    font-size: 16px;
    font-weight: bold;
  }

  .box-card .title::before {
    content: '';
    display: inline-block;
    position: absolute;
    margin: 3px 0 0 -10px;
    border-radius: 2px;
    height: 20px;
    width: 5px;
    background: #00A99D;
  }

  .mb0.el-button--mini {
    margin-bottom: 0;
  }
</style>
